<template>
    <div>
        <div class="top">
            <span class="iconfont icon-direction-left left" @click="back()"></span>
            <i>评论({{total}})</i>
            <span class="iconfont icon-fenxiang right"></span>
        </div>
        <div class="content">
            <div class="bar">
                <div class="img">
            <img :src="song.al.picUrl" alt="">
                </div>
                <span class="name">{{song.name}}</span>
                <span class="singer">-<span v-for="(item,index) in song.ar" :key="index">{{item.name}}&nbsp;</span></span>
                <span class="red">关注</span>
            </div>
            <div class="nav">
                <span class="left">评论区</span>
                <!-- <span class="right">推荐</span> -->
                <span :class="['right',ishot?'active': '']" @click="tohot()">最热</span>
                <span :class="['right',!ishot?'active': '']" @click="tonew()">最新</span>
            </div>
            <div class="lists" ref="lists">
                <ul>
                    <li v-for="(item,index) in lists" :key="index">
                        <div class="heatop">
                            <div class="img">
                        <img :src="item.user.avatarUrl" alt="">
                            </div>
                            <span class="name-date">
                                <div class="one">{{item.user.nickname}}</div>
                                <div class="two">{{getdate(item.time)}}</div>
                            </span>
                            <span class="zan" v-show="!item.myshow">
                                {{item.likedCount | likeCountNum}}                               
                            </span>
                            <span class="zan" v-show="item.myshow">
                                {{item.likedCount+1 | likeCountNum}}                               
                            </span>
                             <i class="iconfont icon-zan" @click="getCommentLikeFun(item.commentId,1)" v-show="!item.myshow"></i>
                             <i class="iconfont icon-zan red" @click="getCommentLikeFun(item.commentId,1)" v-show="item.myshow"></i>
                        </div>
                        <div class="text">
                           {{item.content}}                           
                        </div>
                        <!-- <span class="more">66条回复<i class="iconfont icon-arrow-right"></i></span> -->
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import {getSongComment,getCommentLike} from '../api/comment.js'
import {getSongDetail} from '../api/base.js'
export default {
    data() {
        return {
            lists:[],           
            song:{
                al:{
                    picUrl:null
                }
            },
            offset:0,
            total:0,
            flag:true,
            ishot:true
        }
    },
    methods: {
        getCommentLikeFun(id,t){
            getCommentLike({
                id:this.$route.query.id,
                cid:id,
                t:t,
                type:0,
                cookie:document.cookie
            }).then(data=>{
                console.log(data);
                console.log(id);
            })
            let index = this.lists.findIndex(item=>item.commentId == id);
            //  let index = this.playerLists.findIndex(item=>item.id == id);
            console.log(index);
            this.lists[index].myshow = !this.lists[index].myshow;
            this.$forceUpdate();
        },
        getSongCommentFun(){
            // let id = this.playerId;
            let id = this.$route.query.id;
            // console.log(this.playerId)
            getSongComment({
                id:id,
                limit:10,
                offset:this.offset
            }).then(data=>{
                console.log(data);
                if(this.ishot){
                this.lists = data.hotComments;
                }else{
                    this.lists = data.comments;
                }
                this.total = data.total;       
                this.lists.forEach((item)=>{item.myshow=false;});
                console.log(this.lists);
            })
           
        },
        tonew(){
            this.ishot = false;
            this.getSongCommentFun();
            // window.addEventListener("scroll",this.handleScroll);
            this.$nextTick(()=>{
                window.addEventListener("scroll",this.handleScroll);
            })
            // console.log(window.addEventListener("scroll",this.handleScroll));
        },
        tohot(){
            this.ishot = true;
            this.offset = 0;
            this.getSongCommentFun();
            window.removeEventListener("scroll",this.handleScroll);
        },
        getSongDetailFun(){
            let id = this.$route.query.id;
            getSongDetail({ids:id}).then(data=>{
                // console.log(data);
                this.song = data.songs[0];
                console.log(this.song);
            })
        },
        getdate(time) {
            // var now = new Date(),
            var currenttime = new Date(time);
                // let y = currenttime.getFullYear();
                let m = currenttime.getMonth() + 1;
                let d = currenttime.getDate();
            return (m < 10 ? "0" + m : m) + "月" + (d < 10 ? "0" + d : d) + "日";
        },
        addData(){
            //防抖
            if(this.flag){
                this.flag = false;
                this.offset +=5;
                let id = this.$route.query.id;
                getSongComment({
                    id:id,
                    limit:5,
                    offset:this.offset
                }).then(data=>{
                    // console.log(data);
                    this.lists = this.lists.concat(data.comments);
                    this.flag = true;
                })
            }
        },
        back(){
                this.$router.go(-1);
            },
        //滚动条监听
        handleScroll(){            
                // console.log(111);
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            // console.log(scrollTop);
            // console.log(this.$refs.lists.getElementsByTagName("li"));
            let lis = this.$refs.lists.getElementsByTagName("li");
            // console.log(lis);
            let num = lis.length;
            // console.log(num);
            let liHeight = lis[num-2].offsetTop;
            // console.log(liHeight);
            // console.log("滚动距离"+scrollTop+"高度"+liHeight/2);
            if(scrollTop > liHeight/3){
                // console.log("ok");
                this.addData();
            }            
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.getSongCommentFun();
            this.getSongDetailFun();
            
        })
    },
    beforeDestroy() {
        window.removeEventListener("scroll",this.handleScroll);
    },
    filters: {
    likeCountNum(value) {
      let w = value > 10000 ? (value / 10000).toFixed(2)+"万" : value; //万计算
    //   let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return w;
    },
  },
}
</script>
<style lang="less">
.red{
    color: red !important;
}
.top{
    width: 100%;
    height: 40px;
    display: flex;
    position: fixed;
    line-height: 40px;
    background-color: white;
    padding: 0 6px;
    // border: 1px solid transparent;
    .left,.right{
        color: black;
        font-size: 20px;
        flex: 0 0 40px;
    }
    i{
        font-weight: bold;
        font-size: 18px;
        font-style:normal;
        flex: 1;
    }   
}
.content{
    .bar{
        display: flex;
        height: 60px;
        width: 100%;
        background-color: #fff;
        padding-top: 40px;
        line-height: 60px;
        border-bottom: 10px solid rgb(246,246,246);
        .img{
            flex:0 0 55px;
            text-align: center;
            img{
                width: 36px;
                height: 36px;
                border-radius: 50%;
                margin:10px auto;              
            }
        }
        .name{
            font-size: 14px;
            flex: 0 0 144px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            color: black;
        }
        .singer{
            color: rgb(130,130,130);
            font-size: 12px;
            flex: 0 0 134px;
            text-align: right;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .red{
            color: rgb(254,94,92);
            font-size: 12px;
        }
    }
    .nav{
        display: flex;
        height: 40px;
        line-height: 40px;
        .left{
            font-size: 14px;
            font-weight: bold;
            flex: 1;
            text-indent: 14px;
        }
        .right{
            flex: 0 0 50px;
            font-size: 12px;
            color: rgb(206,206,206);
            text-align: center;
        }
        .active{
            color: #000;
            font-weight: bold;
        }
    }
    .lists{
        ul{
            li{
                border-bottom: 1px solid rgb(252,252,252);
                margin-bottom: 6px;
                padding-bottom: 6px;
                .heatop{
                    display: flex;
                    // height: 18px;
                    line-height: 18px;
            .img{
                flex:0 0 55px;
                text-align: center;
                img{
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    margin:6px auto;              
                }
            }
                .name-date{
                    flex: 1;
                    .one{
                        font-size: 12px;
                        margin-bottom: 4px;
                        color: rgb(153,152,152);
                    }
                    .two{
                        font-size: 10px;
                        color: rgb(162,161,161);
                    }
                }
                .zan{
                    flex: 0 0 44px;
                    text-align: right;
                    font-size: 10px;
                    color: rgb(162,161,161);
                }
                i{
                    flex: 0 0 28px;
                    font-size: 16px;
                    color: rgb(162,161,161);
                }
                }
                .text{
                    font-size: 14px;
                    color: black;
                    margin-left: 14%;
                    margin-right: 8%;
                    white-space: pre-wrap;
                    overflow: hidden;
                }
                .more{
                    font-size: 12px;
                    margin-left: 14%;
                    color: rgb(136,167,200);
                    i{
                    color: rgb(136,167,200);
                    font-size: 13px;                   
                    }
                }
            }
        }
    }
    }
</style>